import '../success/style/successPage.css'
import { Button, Overlay } from 'react-vant';
import { useState, useEffect, use } from 'react'
import successImage from '../../../public/images/success.png'
import { useNavigate } from 'react-router-dom';
const SuccessPage:React.FC = () => {
    const [visible, setVisible] = useState(false);
    const navigate = useNavigate();
    useEffect(() => {
        setVisible(true)
    },[])
    return (
        <>
            <Overlay visible={visible} onClick={() => setVisible(false)}
                style={{
                    height: '100%',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                }}>
                <div 
                className="Overlay-box"
                 >
                    <img src={successImage} alt="success" className="success-image" />
                    <p>恭喜</p>
                    <span style={{fontSize: '12px'}}>你的密码已更改成功</span>
                    <Button
                     type='primary'
                     block
                     style={{
                        width:"90%",
                        marginTop:"20px",
                        margin: "20px auto",
                        borderRadius: "10px",
                     }}
                     onClick={()=>{console.log('应用页面');
                     }}
                    >开始使用
                    </Button>
                </div>
            </Overlay>
        </>
    )
}
export default SuccessPage